<template>
  <div class="home">
    <div class="header">
      <div class="app-header">
        <div class="app-header-left">
          <img src="../assets/xm-logo.png" alt="" />
        </div>
        <div class="app-header-middle">
          <img src="../assets/search.png" alt="" />
          <span>搜索商品名称</span>
        </div>
        <div class="app-header-right">
          <img src="../assets/user.png" alt="" />
        </div>
      </div>
      <div class="nav-header">
        <ul>
          <li
            v-for="(item, index) in navs"
            :key="index"
            :class="{ active: iscom === coms[index] }"
            @click="fn(index)"
          >
            {{ item }}
          </li>
        </ul>
        <div class="icon-arrow-down">
          <img src="../assets/arrow-down.png" alt="" />
        </div>
      </div>
    </div>
    <div class="contents">
      <keep-alive>
        <component :is="iscom"></component>
      </keep-alive>
    </div>
    <div class="app">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/be8d179bf290ba579247340bd02103a3.png" alt="">
    </div>
    <div class="tabbar"></div>
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import Tui from "../components/Home/Tui";
import Zhi from "../components/Home/Zhi";
import Dian from "../components/Home/Dian";
import Jia from "../components/Home/Jia";
import Biji from "../components/Home/Biji";
import Tabbar from "../components/Tabbar"
export default {
  name: "Home",
  data() {
    return {
      iscom: "Tui",
      coms: ["Tui", "Zhi", "Dian", "Jia", "Biji"],
      navs: ["推荐", "智能", "电视", "家电", "笔记本"],
    };
  },
  components: {
    Tui,
    Zhi,
    Dian,
    Jia,
    Biji,
    Tabbar,
  },
  methods: {
    fn(index) {
      this.iscom = this.coms[index];
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../less/index.less";
.home {
  width: 7.2rem;
  margin: 0 auto;
  padding-bottom: 0.5rem;
  background: @theme;
  .header {
    width: 7.2rem;
    position: fixed;
    top: 0;
    z-index: 2;
    background: @theme;
    .app-header {
      width: 100%;
      height: 0.84rem;
      display: flex;
      align-items: center;
      .app-header-left,
      .app-header-right {
        width: 1rem;
        display: flex;
        justify-content: center;
        img {
          width: 0.48rem;
        }
      }
      .app-header-middle {
        width: 5.2rem;
        height: 0.62rem;
        display: flex;
        align-items: center;
        border: 1px solid #e5e5e5;
        color: rgba(0, 0, 0, 0.3);
        background-color: #fff;
        border-radius: 0.04rem;
        img {
          width: 0.4rem;
          height: 0.4rem;
          margin: 0 0.15rem;
        }
        span {
          font-size: 0.3rem;
        }
      }
    }
    .nav-header {
      width: 100%;
      height: 0.56rem;
      background: #f2f2f2;
      font-size: 0.26rem;
      white-space: nowrap;
      position: relative;
      background: @theme;
      ul {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        box-sizing: border-box;
        padding: 0 0.76rem 0 0.33rem;
        li {
          padding: 0 0.25rem;
          line-height: 0.56rem;
          color: rgb(116, 116, 116);
          position: relative;
          cursor: pointer;
        }
        li::after {
          content: " ";
          width: 60%;
          height: 2px;
          background: rgba(237, 91, 0, 0);
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
        }
        li.active {
          color: rgb(237, 91, 0);
        }
        li.active::after {
          background: rgb(237, 91, 0);
        }
      }
      .icon-arrow-down {
        width: 0.68rem;
        height: 100%;
        position: absolute;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
  .contents {
    div {
      position: relative;
      top: 1.4rem;
    }
  }
  .app{
    width: 2.66rem;
    position: fixed;
    height: auto;
    z-index: 99;
    left: 50%;
    right: 0;
    bottom: 1.2rem;
    width: 2.66rem;
    transform: translateX(-1.33rem);
    img{
      width: 100%;
    }
  }
  .tabbar{
    width: 7.2rem;
    height: 0.75rem;
  }
}
</style>